.fx-tabs {
  width: 100%;

  &.fx-tabs-line {
    > .fx-tabs-title-wrapper {
      > .fx-tabs-title-inner {
        > .fx-tabs-title {
          li {
            span {
              padding-bottom: 8px;
              margin-left: 3px;
            }
          }
        }
      }
    }
  }

  &.fx-tabs-card, &.fx-tabs-border-card {
    > .fx-tabs-title-wrapper {
      > span {
        &::after {
          height: 1px;
        }
      }

      > .fx-tabs-title-inner {
        &::after {
          height: 1px;
        }

        > .fx-tabs-line {
          height: 1px;
          background-color: $color-white;
          bottom: 0;
        }

        > .fx-tabs-title {
          > li {
            border: 1px solid $border-color-default;
            border-right: none;
            border-bottom: none;
            margin-right: 0;
            padding: 0 10px;
            position: relative;

            &:last-of-type {
              border-right: 1px solid $border-color-default;
            }

            &.active {
              background-color: #fff;

              &::after {
                content: '';
                position: absolute;
                left: 0;
                bottom: 1px;
                width: 100%;
                height: 1px;
                z-index: 10;
                background-color: #fff;
              }

              > span {
                margin-left: 10px;
              }
            }

            &:hover {
              > span {
                margin-left: 10px;
              }
            }

            > span {
              width: 0;
            }
          }
        }
      }
    }
  }

  &.fx-tabs-border-card {
    border: 1px solid $border-color-default;
    box-shadow: 0 5px 10px 0 $border-color-default;

    > .fx-tabs-title-wrapper {
      background-color: $border-color-lowest;

      > .fx-tabs-title-inner {
        > .fx-tabs-title {
          > li {
            border-top: none;

            &.active {
              background-color: #fff;
              z-index: 10;
            }
          }
        }
      }
    }
  }

  > .fx-tabs-title-wrapper {
    color: $font-color-default;
    width: 100%;
    position: relative;
    height: 30px;
    line-height: 30px;
    display: flex;

    > span {
      display: inline-flex;
      justify-content: center;
      align-items: center;
      width: 20px;
      min-width: 20px;
      color: $font-color-lowest;
      cursor: pointer;
      position: relative;

      &::after {
        content: '';
        position: absolute;
        bottom: 0;
        left: 0;
        width: 100%;
        height: 2px;
        background-color: $border-color-default;
      }
    }

    > .fx-tabs-title-inner {
      height: 30px;
      width: 100%;
      max-width: 100%;
      overflow: hidden;
      position: relative;
      z-index: 10;

      &::after {
        content: '';
        position: absolute;
        bottom: 0;
        left: 0;
        width: 100%;
        height: 2px;
        background-color: $border-color-default;
      }

      > .fx-tabs-line {
        height: 2px;
        background-color: $color-primary;
        position: absolute;
        bottom: 0;
        z-index: 10;
        transition: all 0.15s;
      }


      > .fx-tabs-title {
        position: absolute;
        display: flex;
        align-items: center;
        transition: all 0.15s;

        > li {
          height: 100%;
          margin-right: 15px;
          cursor: pointer;
          display: flex;
          align-items: center;
          transform-origin: left center;
          box-sizing: border-box;
          transition: color 0.15s, background-color 0.15s;

          &.close-enter-active {
            transform: scaleX(1);
            transition: all 0.15s ease;
          }

          &.close-leave-active {
            transform: scaleX(0);
            transition: all 0.15s ease;
          }

          &.close-enter-from {
            transform: scaleX(1);
          }

          &.close-leave-to {
            transform: scaleX(0);
          }

          &:hover, &.active {
            color: $color-primary-7;

            > span {
              width: 12px;
            }
          }

          &.active {
            color: $color-primary;
          }

          > span {
            border-radius: 50%;
            height: 12px;
            display: inline-flex;
            justify-content: center;
            align-items: center;
            overflow: hidden;
            transition: width 0.15s;

            &:hover {
              background-color: $border-color-default;
            }

            > i {
              display: inline-block;
              transform: scale(0.7);
            }
          }
        }
      }
    }
  }

  > .fx-tabs-content {
    overflow: hidden;
    position: relative;
  }
}

.fx-tabs-item {
  width: 100%;
  min-width: 100%;
  left: 0;
  top: 0;

  &.to-left-enter-active {
    transform: translateX(0);
    transition: all 0.3s ease;
  }

  &.to-left-leave-active {
    transform: translateX(-100%);
    transition: all 0.3s ease;
    position: absolute;
  }

  &.to-left-enter-from {
    transform: translateX(100%);
  }

  &.to-left-leave-to {
    transform: translateX(-100%);
  }

  &.to-right-enter-active {
    transform: translateX(0);
    transition: all 0.3s ease;
  }

  &.to-right-leave-active {
    transform: translateX(100%);
    transition: all 0.3s ease;
    position: absolute;
  }

  &.to-right-enter-from {
    transform: translateX(-100%);
  }

  &.to-right-leave-to {
    transform: translateX(100%);
  }
}
